<template>
  <view class="box">
    <view class="content">
      <view
        class="mark"
        @click="clickmark"
        @touchmove.stop.prevent="moveHandle"
        v-show="showmore"
      >
        <view>
          <view class="m_title">功能直达</view>
          <view class="m_item_box">
            <view
              class="m_item"
              v-for="(item, index) in mark"
              :key="index"
              @click="inskip(item.url)"
            >
              <image class="m_img" :src="item.img" alt="" />
              <view class="m_name">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="swiper_box">
        <swiper circular autoplay indicator-dots class="swiper">
          <swiper-item
            class="swiper-item"
            v-for="(item, index) in swiper"
            :key="index"
          >
            <image class="swiper_img" :src="item.img" alt="" />
          </swiper-item>
        </swiper>
      </view>
      <!-- 功能按钮 -->
      <view class="Feature">
        <view class="back">
          <image
            @click="back"
            class="back_img"
            src="http://zyqny.zmycode.top/%E5%B7%A6%E7%AE%AD%E5%A4%B4%E7%99%BD.png"
            alt=""
          />
        </view>
        <view class="more">
          <image
            @click="more"
            class="back_img"
            src="http://zyqny.zmycode.top/%E6%9B%B4%E5%A4%9A.png"
            alt=""
          />
        </view>
      </view>
      <!-- title -->
      <view class="title">
        <view class="money">
          <view class="money_left">
            <view class="title_color">￥4500.00 ~ 4800.00</view>
            <view class="outmoney">价格<s>￥5500.00</s></view>
          </view>
          <!-- 收藏按钮 -->
          <view class="money_right">
            <u-icon
              class="icon"
              @click="changeImg()"
              v-show="showimg"
              name="star"
              size="20"
            ></u-icon>
            <u-icon
              class="icon"
              @click="changeImg()"
              v-show="!showimg"
              name="star-fill"
              size="20"
            ></u-icon>
            <view class="collect">收藏</view>
          </view>
        </view>
        <view class="content_title">
          <view class="text_box">
            <view class="title_title">
              Apple iPhone 14(A2884)128GB星光色支持移动联通电信5G双卡双待手机
            </view>
            <view class="title_content">
              【限时活动】指定iPhone14，可1分钱加购原厂AppleCare+服务，为您的新机保驾护航,赶快下单购买吧!!!
            </view>
          </view>
          <view class="share_box" @click="share">
            <image
              class="share"
              src="http://zyqny.zmycode.top/%E5%88%86%E4%BA%AB.png"
              alt=""
            />
            分享
          </view>
        </view>
        <view class="generate">
          <text class="generate_text">生成海报</text>
        </view>
        <view class="month_shop">
          <view>快递：包裹</view>
          <view>月销69</view>
        </view>
      </view>
      <!-- 购买类型 -->
      <view class="msg">
        <view class="msg_content">
          <view
            class="type"
            @click="onchange(index)"
            v-for="(item, index) in list"
            :key="index"
          >
            <view class="go_type">
              {{ item.type }}
              <view class="size">
                {{ item.size }}
                <u-icon :name="item.icon" size="16"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 评论 -->
      <view class="review">
        <view class="review_content">
          <view class="review_top">
            评论({{ num }})
            <view class="review_left" @click="go_review">
              好评率 {{ percent }}%
              <u-icon name="arrow-right" size="16"></u-icon>
            </view>
          </view>
          <view
            class="review_msg"
            @click="go_review"
            v-for="(item, index) in msg"
            :key="index"
          >
            <image class="toux_img" :src="item.img" alt="" />
            <view class="mag_left">
              <view class="name">{{ item.name }}</view>
              <view class="text">{{ item.text }}</view>
              <view>
                <view class="type">
                  购买类型：{{ item.type }}
                  <view class="time">{{ item.time }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 图片详细 -->
      <view class="Details">
        <image
          class="photo"
          src="http://zyqny.zmycode.top/1610030acca2d88d.jpg%21q70.dpg.png"
          alt=""
        />
      </view>
    </view>
    <!-- 商品导航 -->
    <view class="shop_nav">
      <view class="content">
        <view class="right">
          <view class="item" @click="skip">
            <image
              class="img"
              src="http://zyqny.zmycode.top/gd-home.png"
              alt=""
            />
            <view class="name">首页</view>
          </view>
          <view class="item" @click="gwcar">
            <image
              class="img"
              src="http://zyqny.zmycode.top/%E8%B4%AD%E7%89%A9%E8%BD%A6123.png"
              alt=""
            />
            <view class="name">购物车</view>
          </view>
          <view class="item" @click="kefu">
            <image
              class="img"
              src="http://zyqny.zmycode.top/%E5%AE%A2%E6%9C%8D.png"
              alt=""
            />
            <view class="name">客服</view>
          </view>
        </view>
        <view class="left">
          <view class="gm" @click="open">立即购买</view>
          <view class="gwc">加入购物车</view>
        </view>
      </view>
    </view>
    <!-- 立即购买 -->
    <view class="buy">
      fdsaln
      <u-popup
        :show="show"
        :round="10"
        mode="bottom"
        @close="close"
        @open="open"
      >
        <view class="buy_box">
          <view class="top">
            <view class="top_left">
              <image
                class="buy_img"
                src="http://zyqny.zmycode.top/1698661593944.jpg"
                alt=""
              />
            </view>
            <view class="top_right">
              <view class="buy_title">
                Apple iPhone 14(A2884)128GB星光色支持移动联通电信5G双卡双待手机
              </view>
              <view class="buy_money">￥{{ money }}</view>
              <view class="inventory">库存：{{ inventory }}</view>
            </view>
          </view>
          <view class="buttom">
            <view class="buttom_left">
              <view class="buttom_left_title">购买数量</view>
              <view class="opera">
                <image
                  src="http://uniqn.zmycode.top/%E5%87%8F.png"
                  alt=""
                  @click="reduction()"
                />
                <view>{{ shopnum }}</view>
                <image
                  src="http://uniqn.zmycode.top/%E5%8A%A0%E5%8F%B7.png"
                  alt=""
                  @click="add()"
                />
              </view>
            </view>
          </view>
          <view class="button">
            <button class="btn" @click="ok">完成</button>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

import image from "uview-plus/libs/config/props/image";
import { Image } from "@dcloudio/uni-h5";
const shopnum = ref(1);
const inventory = ref(9999);
const money = ref(5000);
const showimg = ref(true);
const num = ref(100);
const percent = ref(100);
const showmore = ref(false);
const show = ref(false);
//禁止滑动
const moveHandle = () => {};
// 跳转到结算页
const ok = () => {
  uni.navigateTo({
    url: "/pages/management/management",
  });
};
//加
const add = () => {
  shopnum.value++;
};
//减
const reduction = () => {
  if (shopnum.value > 1) {
    shopnum.value--;
  }
};
// 弹出层的显示隐藏
const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
// 跳转评论
const go_review = () => {
  uni.showToast({
    title: "跳转评论",
  });
};
// 购买类型
const onchange = (index) => {
  if (index === 0) {
    uni.showToast({
      title: "没页面，选不了",
    });
  } else if (index === 1) {
    uni.showToast({
      title: "没有优惠券",
    });
  } else if (index === 2) {
    uni.showToast({
      title: "请选择商品规格",
    });
  } else {
    uni.showToast({
      title: "正品保证，建议购买",
    });
  }
};
// mark
const changeImg = () => {
  showimg.value = !showimg.value;
};
// 分享
const share = () => {
  uni.showToast({
    title: "分享成功",
  });
};
// 商品导航
//首页
const skip = () => {
  uni.switchTab({
    url: "/pages/index/index",
  });
};
//前往购物车
const gwcar = () => {
  uni.switchTab({
    url: "/pages/shoppingcart/shoppingcart",
  });
};
//客服按钮
const kefu = () => {
  uni.showToast({
    title: "没客服，黑店",
  });
};
// 返回按钮
const back = () => {
  uni.navigateBack();
};
// mark的跳转
const inskip = (url) => {
  uni.switchTab({
    url: url,
  });
};
// mark的显示隐藏
const more = () => {
  showmore.value = !showmore.value;
};
//点击蒙版隐藏
const clickmark = () => {
  showmore.value = false;
};

const mark = ref([
  {
    img: "http://zyqny.zmycode.top/%E9%A6%96%E9%A1%B5-copy.png",
    name: "首页",
    url: "/pages/index/index",
  },
  {
    img: "http://zyqny.zmycode.top/%E6%B6%88%E6%81%AF.png",
    name: "消息",
    url: "/pages/message/message",
  },
  {
    img: "http://zyqny.zmycode.top/%E6%88%91%E7%9A%841.png",
    name: "我的",
    url: "/pages/mine/mine",
  },
  {
    img: "http://zyqny.zmycode.top/%E6%B6%88%E6%81%AF.png",
    name: "购物车",
    url: "/pages/shoppingcart/shoppingcart",
  },
  {
    img: "http://zyqny.zmycode.top/%E5%8F%8D%E9%A6%88-%E7%BA%BF.png",
    name: "我要反馈",
  },
  {
    img: "http://zyqny.zmycode.top/%E8%AE%A2%E5%8D%951.png",
    name: "我的订单",
  },
]);
//评论
const msg = ref([
  {
    img: "http://zyqny.zmycode.top/toux.png",
    name: "匿名用户",
    type: "基础版",
    text: "针不戳",
    time: "2022-12-12 14:03",
  },
]);
const list = ref([
  {
    type: "购买类型",
    size: "请选择规格",
    icon: "arrow-right",
  },
  {
    type: "优惠券",
    size: "暂无可领取优惠券",
  },
  {
    type: "积分活动",
    size: "下单可获得:50积分",
  },
  {
    type: "服务",
    size: "正品保证",
    icon: "arrow-right",
  },
]);
const swiper = ref([
  {
    img: "http://zyqny.zmycode.top/1698753417185.jpg",
  },
  {
    img: "http://zyqny.zmycode.top/1698753417185.jpg",
  },
]);
</script>

<style lang="scss" scoped>
.box {
  .content {
    background-color: #f5f5f5;
    padding-top: var(--status-bar-height);
    padding-bottom: 80rpx;
    // 遮罩层
    .mark {
      color: #fff;
      position: fixed;
      top: 0;
      z-index: 6;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.7);
      .m_title {
        padding-top: 100rpx;
        text-align: center;
      }
      .m_item_box {
        margin-top: 60rpx;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 0 24rpx;
        box-sizing: border-box;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        .m_item {
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 20rpx;
          text-align: center;
          background-color: #000;
          .m_img {
            width: 60rpx;
            height: 60rpx;
          }
          .m_name {
            margin-top: 10rpx;
            color: #fff;
            font-size: 26rpx;
          }
        }
      }
    }
    .swiper_box {
      .swiper {
        height: 600rpx;

        .swiper-item {
          height: 600rpx;
          .swiper_img {
            width: 100%;
            height: 600rpx;
          }
        }
      }
    }
    .Feature {
      position: absolute;
      z-index: 99;
      top: var(--status-bar-height);
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      width: 90%;
      align-items: center;
      justify-content: space-between;
      .back {
        .back_img {
          padding: 10rpx;
          box-sizing: border-box;
          border-radius: 50%;
          background-color: #7f7f7f;
          width: 70rpx;
          height: 70rpx;
        }
      }
      .more {
        .back_img {
          padding: 10rpx;
          box-sizing: border-box;
          border-radius: 50%;
          background-color: #7f7f7f;
          width: 70rpx;
          height: 70rpx;
        }
      }
    }
    .title {
      width: 94%;
      margin: 20rpx auto;
      padding-bottom: 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 16rpx;
      .money {
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .money_left {
          .title_color {
            font-size: 44rpx;
            color: #f9426b;
          }
          .outmoney {
            color: #9e999d;
          }
        }
        .money_right {
          text-align: center;
          color: #9e999d;
          text-align: center;
          .collect {
            font-size: 28rpx;
          }
          .icon {
            display: flex;
            justify-content: center;
            flex-direction: unset;
          }
        }
      }
      .content_title {
        padding: 0 0 0 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .text_box {
          width: 80%;
          .title_title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            font-size: 30rpx;
            color: #000;
            font-weight: 400;
          }
          .title_content {
            margin-top: 12rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            font-size: 26rpx;
            color: #9e999d;
          }
        }

        .share_box {
          background-color: #ededed;
          padding: 10rpx;
          box-sizing: border-box;
          border-radius: 50rpx 0 0 50rpx;
          display: flex;
          align-items: center;
          color: #f9426b;
          font-size: 28rpx;
          .share {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .generate {
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        .generate_text {
          padding: 6rpx 20rpx;
          box-sizing: border-box;
          background-color: #f9426b;
          border-radius: 50rpx;
          font-size: 26rpx;
          color: #fff;
          margin-top: 20rpx;
        }
      }
      .month_shop {
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 26rpx;
        color: #9e999d;
      }
    }
    .msg {
      margin-top: 20rpx;

      .msg_content {
        background-color: #fff;
        padding: 20rpx;
        box-sizing: border-box;
        width: 94%;
        border-radius: 20rpx;
        margin: 0 auto;
      }
      .type {
        color: #666;
        font-size: 28rpx;
        border-bottom: 1px solid rgb(247, 247, 247);
        padding: 20rpx 0;
        box-sizing: border-box;
        .go_type {
          display: flex;
          gap: 0rpx 10rpx;
          align-items: center;
          justify-content: space-between;
          .size {
            // border: 1px solid #000;
            width: 74%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
    .review {
      width: 94%;
      margin: 20rpx auto;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: #fff;
      .review_content {
        .review_top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .review_left {
            color: #9b9797;

            display: flex;
          }
        }
        .review_msg {
          margin-top: 20rpx;
          width: 100%;
          display: flex;
          gap: 0 20rpx;
          align-items: center;
          .toux_img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
          }
          .mag_left {
            width: 80%;
            display: grid;
            gap: 6rpx 0;
            .name {
              color: #676767;
            }
            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .type {
              color: #9b9797;
              width: 100%;
              font-size: 28rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
        }
      }
    }
    .Details {
      .photo {
        width: 100%;
        height: 2600rpx;
      }
    }
  }
  .shop_nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #f5f5f5;

    .content {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 30rpx;
      box-sizing: border-box;
      .right {
        width: 36%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .item {
          text-align: center;
        }
        .img {
          width: 40rpx;
          height: 40rpx;
        }
        .name {
          font-size: 26rpx;
        }
      }
      .left {
        font-size: 30rpx;
        display: flex;
        width: 60%;
        .gm {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          color: #fff;
          border-radius: 50rpx 0rpx 0rpx 50rpx;
          background-color: #f9426b;
        }
        .gwc {
          width: 50%;
          color: #adadad;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0rpx 50rpx 50rpx 0rpx;
          background-color: #f7f7f7;
        }
      }
    }
  }
  .buy {
    .buy_box {
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      .top {
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgb(212, 212, 212);
        .top_left {
          width: 30%;
          .buy_img {
            width: 160rpx;
            height: 160rpx;
          }
        }
        .top_right {
          width: 70%;
          .buy_title {
            font-size: 28rpx;
          }
          .buy_money {
            font-size: 28rpx;
            color: #f9426b;
          }
          .inventory {
            font-size: 28rpx;
          }
        }
      }
      .buttom {
        .buttom_left {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 40rpx 0;
          box-sizing: border-box;

          .opera {
            display: flex;
            gap: 0 10rpx;
            align-items: center;
            image {
              padding: 10rpx;
              box-sizing: border-box;
              width: 50rpx;
              height: 50rpx;
              background-color: #f3f3f3;
            }
          }
        }
      }
      .button {
        .btn {
          border-radius: 123131rpx;
          background-color: #f9426b;
          color: #fff;
        }
      }
    }
  }
}
</style>
